<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="static/vue.min.js"></script>
    <script type="text/javascript" src="static/jquery-1.12.4.min.js"></script>
    <style type="text/css">
        .talk_con {
            width: 600px;
            height: 500px;
            border: 1px solid #666;
            margin: 50px auto 0;
            background: #f9f9f9;
        }

        .talk_show {
            width: 580px;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }

        .talk_input {
            width: 580px;
            margin: 10px auto 0;
        }

        .whotalk {
            width: 80px;
            height: 30px;
            float: left;
            outline: none;
        }

        .talk_word {
            width: 420px;
            height: 26px;
            padding: 0px;
            float: left;
            margin-left: 10px;
            outline: none;
            text-indent: 10px;
        }

        .talk_sub {
            width: 56px;
            height: 30px;
            float: left;
            margin-left: 10px;
        }

        .atalk {
            margin: 10px;
        }

        .atalk span {
            display: inline-block;
            background: #0181cc;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }

        .btalk {
            margin: 10px;
            text-align: right;
        }

        .btalk span {
            display: inline-block;
            background: #ef8201;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<div class="talk_con">
    <div class="talk_show" id="words">
        <div :class="obj.who=='A'?'atalk':'btalk'" v-for="obj in information">
            <span>{{obj.who}}说：{{obj.content}}</span>
        </div>
    </div>
    <div class="talk_input">
        <select class="whotalk" id="who" v-model="you">
            <option value="0">A说：</option>
            <option value="1">B说：</option>
        </select>
        <input type="text" class="talk_word" @keydown.enter="send()" id="talkwords" v-model="msg">
        <input type="button" value="发送" class="talk_sub" id="talksub" @click="send()">
    </div>
</div>
<script>
    // 写出对应功能代码
    new Vue({
        el: ".talk_con",
        data: {
            msg: "",
            you: "0",
            information: [
                {who: "A", content: "吃饭了吗？"},
                {who: "B", content: "还没呢，你呢？"}
            ]
        },
        methods: {
            send: function () {
                if (this.msg == "") {
                    confirm("请输入有效信息");
                    return;
                }
                this.information.push({who: this.you == '0' ? 'A' : 'B', content: this.msg})
                if (this.you == "0") {
                    this.you = 1;
                } else {
                    this.you = 0;
                }
                // 输入框清空
                this.msg = "";
                // 焦点聚焦在输入框
                $(function () {
                    $("#talkwords").focus();
                })
                setTimeout(function () {
                    $(function () {
                        $("#words").scrollTop = "999999999";
                    }, 1)
                });
            }
        }
    });
</script>
</body>
</html>